<template>
  <f7-page>
    <f7-navbar title="统计" back-link="返回"></f7-navbar>
    <div class="card-bg">
      <div class="bankCard-bg bankCard-bg-gray">
        <div class="row">
          <div class="col">
            <h2 class="h-28">￥{{models.userCredit.infoprice.price_total-models.userCredit.infoprice.send_price}}</h2>
            <h5 class="">红包累计补贴：{{models.userCredit.driver_price.red_card}}</h5>
          </div>
          <div class="col col-33 text-align-right">
            <h5 class="label-cash gap-5" @click="sendParams('/mine/finance_balance/', models.userCredit.infoprice.send_price)">信息费提现</h5>
          </div>
        </div>
        <div class="row gap-10">
          <div class="col col-33">
            <h5>信息费总收入</h5>
            <h4>￥{{models.userCredit.infoprice.price_total}}</h4>
          </div>
          <div class="col col-33">
            <h5>货源运费总收入</h5>
            <h4>￥{{models.userCredit.pass_price.total}}</h4>
          </div>
          <div class="col col-33">
            <h5>车辆运费总支出</h5>
            <h4>￥{{models.userCredit.driver_price.total}}</h4>
          </div>
        </div>
      </div>
    </div>
    <f7-block v-if="models.userCredit.infoprice.in_discount">{{models.userCredit.infoprice.in_discount}}</f7-block>
    <div class="row text-align-center">
      <h5 class="col col-10"></h5>
      <h5 class="col text-gray">货到付款</h5>
      <h5 class="col text-gray">款到发货</h5>
      <h5 class="col text-gray">分期</h5>
      <h5 class="col text-gray">信用</h5>
    </div>
    <div class="row text-align-center gap-5">
      <h5 class="col col-10">货源</h5>
      <h5 class="col text-gray">{{models.userCredit.pass_price.all_goods/models.userCredit.pass_price.total | percentage}}</h5>
      <h5 class="col text-gray">{{models.userCredit.pass_price.all_cash/models.userCredit.pass_price.total | percentage}}</h5>
      <h5 class="col text-gray">{{models.userCredit.pass_price.partition/models.userCredit.pass_price.total | percentage}}</h5>
      <h5 class="col text-gray">{{models.userCredit.pass_price.credit/models.userCredit.pass_price.total | percentage}}</h5>
    </div>
    <div class="row text-align-center gap-5">
      <h5 class="col col-10">司机</h5>
      <h5 class="col text-gray">{{models.userCredit.driver_price.all_goods/models.userCredit.driver_price.total | percentage}}</h5>
      <h5 class="col text-gray">{{models.userCredit.driver_price.all_cash/models.userCredit.driver_price.total | percentage}}</h5>
      <h5 class="col text-gray">{{models.userCredit.driver_price.partition/models.userCredit.driver_price.total | percentage}}</h5>
      <h5 class="col text-gray">{{models.userCredit.driver_price.credit/models.userCredit.driver_price.total | percentage}}</h5>
    </div>
    <div class="list media-list">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">计划月报</div>
            </div>
            <div class="item-subtitle">{{models.years}}年{{models.month}}月</div>
          </div>
          <div class="item-after margin-right">
            <span @click="changeMonth('minus')">&lt;</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span @click="changeMonth('plus')">&gt;</span>
          </div>
        </li>
      </ul>
      <commitchart v-if='isRouterAlive' :line='line'></commitchart>
    </div>
  </f7-page>
</template>

<script>
import Vue from 'vue'
import vueNumeralFilterInstaller from 'vue-numeral-filter'
import commitchart from '../../components/commitchart'
Vue.use(vueNumeralFilterInstaller);
export default {
  name: 'app',
  data () {
    return {
      models: {
        userCredit: {
          driver_price: '',
          pass_price: '',
          infoprice: ''
        },
        years: new Date().getFullYear(),
        month: new Date().getMonth() + 1
      },
      line:{},
      isRouterAlive: true
    }
  },
  components: {
      commitchart
  },
  methods: {
    async userCredit () {

      let userCreditRep = await this.LineService.userCredit({
        time_chart: this.models.years +'/'+ this.models.month
        // time_chart: '2018/7'
      })
      if (userCreditRep.data.status === 'success') {
        this.models.userCredit = userCreditRep.data.data
        //作图 driver_chart,pass_chart,tip_chart

        if(userCreditRep.data.data['driver_chart']){
          this.isRouterAlive = false
          this.$nextTick(() => (this.isRouterAlive = true))
          //日期
          this.line.labels=[]
          for(let y in userCreditRep.data.data['driver_chart']){
            this.line.labels.push(y.split('-')[1])
          }

          //数据 颜色 名称 ['driver_chart', 'pass_chart', 'tip_chart']
          let chart=['driver_chart', 'pass_chart', 'tip_chart']; let chart_o=0; let color=['red', 'blue','yellow'];
          for(let x of chart){
            this.line.datasets[chart_o]={
              label: x,
              borderColor: color[chart_o],
              data:[]
            }
            for(let i in userCreditRep.data.data[x]){
              this.line.datasets[chart_o]['data'].push(userCreditRep.data.data[x][i])
            }
            chart_o++;
          }
        }

      }
    },
    sendParams (route, value) {
      this.$f7.router.navigate({ url: route + value })
    },
    changeMonth (type) {
      if (type == 'plus') {
        if (this.models.month < 12) {
          this.models.month++
        } else {
          this.models.month = 1;
          this.models.years++
        }

      } else {
        if (this.models.month != 1) {
          this.models.month--
        } else {
          this.models.month = 12;
          this.models.years--
        }
      }
      
      this.userCredit()
    }
  },
  mounted () {
    this.userCredit()
  }
}
</script>

<style scoped>
.ios .page {
  background: #fff;
}
.ios .block {
  margin: 0px 0 15px 5px;
}
.ios .list {
  margin: 20px 0 0 0;
}
.ios .media-list .item-title {
  color: #a2a2f0;
}
.ios .list .item-subtitle {
  color: #a2a2f0;
}
.card-bg {
  background-image: linear-gradient(-180deg, #a2a2f0 50%, #fff 50%, #fff 100%);
  padding: 15px 20px 12px 20px;
}
.bankCard-bg {
  padding: 12px 15px 12px 15px;
  /* min-height: 145px; */
  border-radius: 10px;
}
.bankCard-bg-gray {
  background: url('../../assets/img/card-bg.jpg') no-repeat center center;
  background-size: cover;
}
.label-cash {
  display: inline-block;
  background: #fc4e00;
  color: #fff;
  padding: 2px 8px;
  font-size: 10px;
  line-height: 20px;
  border-radius: 5px;
  vertical-align: middle;
}
.h-28 {
  font-size: 28px;
}
</style>
